<script setup lang="ts">
import { QForm, type FormItemRows } from '@meetjs/element-plus-kit'
import { type FormRules, ElMessage } from 'element-plus'
import { getDicts } from '@/api/system/dict/index'
import type { IGetDictsRes } from '@/api/system/dict/type'
import { addPost, updatePost } from '@/api/system/post/index'
import type { PostItem, PostParams } from '@/api/system/post/type'

const emits = defineEmits<{
	refresh: []
}>()

const visible = ref(false)
const loading = ref(false)
const title = ref<'新增岗位' | '编辑岗位'>('新增岗位')
const type = ref<'add' | 'edit'>('add')
const formRef = ref()

const sysNormalDisable = ref<IGetDictsRes>([])

const baseFormData: PostParams = {
	postName: '',
	postCode: '',
	postSort: 0,
	status: 0,
	remark: ''
}
const dialogFormValue = ref<PostParams>({ ...baseFormData })

const init = (operationType: 'add' | 'edit', editForm?: PostItem) => {
	visible.value = true
	type.value = operationType
	title.value = operationType === 'add' ? '新增岗位' : '编辑岗位'

	// 根据操作类型初始化表单数据
	if (operationType === 'edit' && editForm) {
		// 编辑模式：直接使用传入的数据
		dialogFormValue.value = { ...editForm }
	} else {
		// 新增模式：使用默认数据
		dialogFormValue.value = { ...baseFormData }
	}

	// 清理表单验证状态
	setTimeout(() => {
		formRef.value?.clearValidate()
	})
}
const dialogOptions = ref<FormItemRows[]>([
	{
		type: 'input',
		label: '岗位名称',
		prop: 'postName',
		col: 24,
		attrs: {
			placeholder: '请输入岗位名称',
			clearable: true
		}
	},
	{
		type: 'input',
		label: '岗位编码',
		prop: 'postCode',
		col: 24,
		attrs: {
			placeholder: '请输入岗位编码',
			clearable: true
		}
	},
	{
		type: 'input-number',
		label: '岗位顺序',
		prop: 'postSort',
		col: 24,
		attrs: {
			min: 0,
			placeholder: '请输入岗位顺序',
			controls: false
		}
	},
	{
		type: 'radio',
		label: '岗位状态',
		prop: 'status',
		col: 24,
		options: sysNormalDisable as unknown as any
	},
	{
		type: 'textarea',
		label: '备注',
		prop: 'remark',
		col: 24,
		attrs: {
			rows: 3,
			placeholder: '请输入备注',
			maxlength: 500,
			showWordLimit: true
		},
		required: false
	}
])

const rules = reactive<FormRules<{ [k: string]: any }>>({
	postName: [
		{
			required: true,
			message: '请输入岗位名称'
		}
	],
	postCode: [
		{
			required: true,
			message: '请输入岗位编码'
		}
	],
	postSort: [
		{
			required: true,
			message: '请输入岗位顺序'
		}
	]
})

const submit = () => {
	formRef.value?.validate(async (valid: boolean) => {
		if (valid) {
			loading.value = true
			try {
				const apiFunc = type.value === 'add' ? addPost : updatePost
				await apiFunc({ ...dialogFormValue.value })
				const message = type.value === 'add' ? '新增成功' : '修改成功'
				ElMessage.success(message)
				visible.value = false
				emits('refresh')
			} finally {
				loading.value = false
			}
		}
	})
}

const getMethods = () => {
	getDicts('sys_sys_normal_disable').then(data => {
		sysNormalDisable.value = data
	})
}

onMounted(() => {
	getMethods()
})

defineExpose({
	init
})
</script>

<template>
	<ElDialog
		v-model="visible"
		:title="title"
		:close-on-click-modal="false"
		width="500px"
	>
		<QForm
			ref="formRef"
			label-width="80px"
			:model="dialogFormValue"
			:form-options="dialogOptions"
			:rules="rules"
			:required="true"
			:gutter="20"
		/>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button
				type="primary"
				:loading="loading"
				@click="submit"
			>
				确定
			</el-button>
		</template>
	</ElDialog>
</template>

<style scoped></style>
